<<style>
.demo-affix {
  padding: 0px 30px;
  float: right;
  z-index: 1001
}
.cardtree{
  padding: 0px 30px;
}
</style>

<template>
<div>
  <Affix :offset-top="100">
    <ButtonGroup class="demo-affix">
      <Button type="info" @click="assignOK">保存</Button>
      <Button type="ghost" @click="assignCancel">取消</Button>
    </ButtonGroup>
  </Affix>
  <Card :bordered="true">
    <p slot="title">{{role.Name}}</p>
    <CheckboxGroup v-model="assignItem.checked">
    <rrd :assignItem="assignItem"></rrd>
    </CheckboxGroup>
  </Card>


</div>
</template>

<script>
export default {
  data() {
    return {
      loading: true, //数据刷新遮罩层
      role: this.$route.params.role,
      assignItem: [],
      checkAllGroup: this.getRescheked
    }
  },
  components: {
    rrd: {
      name: 'rrd',
      template: `
      <div>      
      <tr v-for="item in assignItem.children" :key="item.id" class="cardtree">
          <p slot="title"><Checkbox :label="item.id">{{item.title}}</Checkbox></p>
          <rrd :assignItem="item" class="cardtree"></rrd>          
      </tr  >
      </div>
      `,
      props: ['assignItem'],
    },
  },
  computed: {
    getRescheked() {
      return this.$refs.roleTree.getCheckedNodes()
    }
  },
  watch: {},
  methods: {
    getall() {
      if(!this.role || !this.role.Id){
         this.$router.push({
            name: '角色管理'
          })
      }
      this.$api.GetResByRole(this.role.Id).then(res => {
        if (!res.error) {
          console.log(res.Data)
          this.assignItem = res.Data
          if(!this.assignItem.checked){
            this.assignItem.checked=[]
          }
        } else {
          this.$Message.error(res.message, 4)
        }
      })
    },
    assignOK() {
      let rdata = {}
      rdata['Roleid'] = this.role.Id
      rdata['Resources'] = this.assignItem.checked
      console.log(rdata)
      this.$api.AssignResources(rdata).then(res => {
        if (!res.error) {
          this.$Message.success(res.message)
          this.$router.push({
            name: '角色管理'
          })
        } else {
          this.$Message.error(res.message, 4)
        }
      })
    },
    assignCancel() {
      this.$router.push({
        name: '角色管理'
      })
    }

  },
  mounted() {
    let self = this
    self.getall()
  }
}
</script>
